<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fruchterman Layout with Changing Configurations</title>
  </head>

  <body>
    <div id="description">Fruchterman 布局，重力：1</div>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: '0',
            cluster: 'a',
          },
          {
            id: '1',
            label: '1',
            cluster: 'a',
          },
          {
            id: '2',
            label: '2',
            cluster: 'a',
          },
          {
            id: '3',
            label: '3',
            cluster: 'a',
          },
          {
            id: '4',
            label: '4',
            cluster: 'a',
          },
          {
            id: '5',
            label: '5',
            cluster: 'a',
          },
          {
            id: '6',
            label: '6',
            cluster: 'a',
          },
          {
            id: '7',
            label: '7',
            cluster: 'a',
          },
          {
            id: '8',
            label: '8',
            cluster: 'a',
          },
          {
            id: '9',
            label: '9',
            cluster: 'a',
          },
          {
            id: '10',
            label: '10',
            cluster: 'a',
          },
          {
            id: '11',
            label: '11',
            cluster: 'a',
          },
          {
            id: '12',
            label: '12',
            cluster: 'a',
          },
          {
            id: '13',
            label: '13',
            cluster: 'b',
          },
          {
            id: '14',
            label: '14',
            cluster: 'b',
          },
          {
            id: '15',
            label: '15',
            cluster: 'b',
          },
          {
            id: '16',
            label: '16',
            cluster: 'b',
          },
          {
            id: '17',
            label: '17',
            cluster: 'b',
          },
          {
            id: '18',
            label: '18',
            cluster: 'c',
          },
          {
            id: '19',
            label: '19',
            cluster: 'c',
          },
          {
            id: '20',
            label: '20',
            cluster: 'c',
          },
          {
            id: '21',
            label: '21',
            cluster: 'c',
          },
          {
            id: '22',
            label: '22',
            cluster: 'c',
          },
          {
            id: '23',
            label: '23',
            cluster: 'c',
          },
          {
            id: '24',
            label: '24',
            cluster: 'c',
          },
          {
            id: '25',
            label: '25',
            cluster: 'c',
          },
          {
            id: '26',
            label: '26',
            cluster: 'c',
          },
          {
            id: '27',
            label: '27',
            cluster: 'c',
          },
          {
            id: '28',
            label: '28',
            cluster: 'c',
          },
          {
            id: '29',
            label: '29',
            cluster: 'c',
          },
          {
            id: '30',
            label: '30',
            cluster: 'c',
          },
          {
            id: '31',
            label: '31',
            cluster: 'd',
          },
          {
            id: '32',
            label: '32',
            cluster: 'd',
          },
          {
            id: '33',
            label: '33',
            cluster: 'd',
          },
        ],
        edges: [
          {
            source: '0',
            target: '1',
          },
          {
            source: '0',
            target: '2',
          },
          {
            source: '0',
            target: '3',
          },
          {
            source: '0',
            target: '4',
          },
          {
            source: '0',
            target: '5',
          },
          {
            source: '0',
            target: '7',
          },
          {
            source: '0',
            target: '8',
          },
          {
            source: '0',
            target: '9',
          },
          {
            source: '0',
            target: '10',
          },
          {
            source: '0',
            target: '11',
          },
          {
            source: '0',
            target: '13',
          },
          {
            source: '0',
            target: '14',
          },
          {
            source: '0',
            target: '15',
          },
          {
            source: '0',
            target: '16',
          },
          {
            source: '2',
            target: '3',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '5',
            target: '6',
          },
          {
            source: '7',
            target: '13',
          },
          {
            source: '8',
            target: '14',
          },
          {
            source: '9',
            target: '10',
          },
          {
            source: '10',
            target: '22',
          },
          {
            source: '10',
            target: '14',
          },
          {
            source: '10',
            target: '12',
          },
          {
            source: '10',
            target: '24',
          },
          {
            source: '10',
            target: '21',
          },
          {
            source: '10',
            target: '20',
          },
          {
            source: '11',
            target: '24',
          },
          {
            source: '11',
            target: '22',
          },
          {
            source: '11',
            target: '14',
          },
          {
            source: '12',
            target: '13',
          },
          {
            source: '16',
            target: '17',
          },
          {
            source: '16',
            target: '18',
          },
          {
            source: '16',
            target: '21',
          },
          {
            source: '16',
            target: '22',
          },
          {
            source: '17',
            target: '18',
          },
          {
            source: '17',
            target: '20',
          },
          {
            source: '18',
            target: '19',
          },
          {
            source: '19',
            target: '20',
          },
          {
            source: '19',
            target: '33',
          },
          {
            source: '19',
            target: '22',
          },
          {
            source: '19',
            target: '23',
          },
          {
            source: '20',
            target: '21',
          },
          {
            source: '21',
            target: '22',
          },
          {
            source: '22',
            target: '24',
          },
          {
            source: '22',
            target: '25',
          },
          {
            source: '22',
            target: '26',
          },
          {
            source: '22',
            target: '23',
          },
          {
            source: '22',
            target: '28',
          },
          {
            source: '22',
            target: '30',
          },
          {
            source: '22',
            target: '31',
          },
          {
            source: '22',
            target: '32',
          },
          {
            source: '22',
            target: '33',
          },
          {
            source: '23',
            target: '28',
          },
          {
            source: '23',
            target: '27',
          },
          {
            source: '23',
            target: '29',
          },
          {
            source: '23',
            target: '30',
          },
          {
            source: '23',
            target: '31',
          },
          {
            source: '23',
            target: '33',
          },
          {
            source: '32',
            target: '33',
          },
        ],
      };

      const colors = [
        'rgb(64, 174, 247)',
        'rgb(108, 207, 169)',
        'rgb(157, 223, 125)',
        'rgb(240, 198, 74)',
        'rgb(221, 158, 97)',
        'rgb(141, 163, 112)',
        'rgb(115, 136, 220)',
        'rgb(133, 88, 219)',
        'rgb(203, 135, 226)',
        'rgb(227, 137, 163)',
      ];

      const nodes = data.nodes;
      const clusterMap = new Map();
      let clusterId = 0;
      nodes.forEach(node => {
        // cluster
        if (node.cluster && clusterMap.get(node.cluster) === undefined) {
          clusterMap.set(node.cluster, clusterId);
          clusterId++;
        }
        const cid = clusterMap.get(node.cluster);
        if (node.style) {
          node.style.fill = colors[cid % colors.length];
        } else {
          node.style = {
            fill: colors[cid % colors.length],
          };
        }
      });
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        modes: {
          default: ['drag-canvas', 'drag-node'],
        },
        layout: {
          type: 'fruchterman',
          center: [500, 300],
          gravity: 1,
          speed: 5,
        },
        animate: true,
        defaultNode: {
          size: [20, 20],
          color: 'steelblue',
          style: {
            lineWidth: 2,
            fill: '#fff',
          },
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4,
            },
          },
        },
      });
      graph.data(data);
      graph.render();

      const descriptionDiv = document.getElementById('description');

      layoutConfigTranslation();

      function layoutConfigTranslation() {
        setTimeout(() => {
          descriptionDiv.innerHTML = 'Fructherman 布局，重力：5';
          graph.updateLayout({
            gravity: 5,
          });
        }, 1000);

        setTimeout(() => {
          descriptionDiv.innerHTML = 'Fructherman 布局，重力：10，按聚类布局';
          graph.updateLayout({
            gravity: 10,
            clustering: true,
          });
        }, 2500);

        setTimeout(() => {
          descriptionDiv.innerHTML = 'Fructherman 布局，重力：20，按聚类布局';
          graph.updateLayout({
            gravity: 20,
          });
        }, 4000);

        setTimeout(() => {
          descriptionDiv.innerHTML = 'Fructherman 布局，重力：50，按聚类布局';
          graph.updateLayout({
            gravity: 50,
          });
        }, 5500);

        setTimeout(() => {
          descriptionDiv.innerHTML = 'Fructherman 布局，重力：80，按聚类布局';
          graph.updateLayout({
            gravity: 80,
          });
        }, 7000);
      }
    </script>
  </body>
</html>
